<template>
	<div>
		<div class="head">
			发现
		</div>
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<div style="padding-top:10px;">
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
						<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
							<div class="item" v-for="item of list" :key="item.id" @click="toNewsDetails(item.id)">
								<img :src="item.imgUrl" alt="">
								<div class="t">
									<span v-text="item.title"></span>
									<span class="time" v-text="item.createTime"></span>
								</div>
							</div>
						</van-list>
					</van-pull-refresh>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { find } from './../../utils/api';
	export default {
		data() {
			return {
				list: [],
				size: 10, // 每页数量
				total: '', // 总数量
				listLength: '', // 当前总数量
				isLoading: false,
				finished: false,
				loading: false
			}
		},
		mounted() {
			this.List()
		},
		methods: {
			toNewsDetails(id) {
				this.$router.push({
					name: 'NewsDetails',
					query: {
						id
					}
				})
			},
			List() {
				find.getDiscover().then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						this.listLength = res.data.records.length; // 当前总数量
						this.total = res.data.total; // 总数量
					}
				})
			},
			onRefresh() { // 上拉刷新
				this.List()
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 下拉加载
				this.List()
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			}
		}
	}
</script>

<style lang="less" scoped>
	.overlay-content {
		background: #fff;
	}
	
	.title {
		font-size: 16px;
		padding: 0 10px;
		margin: 15px;
		position: relative;
		&:before {
			content: " ";
			position: absolute;
			width: 5px;
			height: 12px;
			top: 7px;
			left: 0;
			background: #ff5555;
		}
	}
	
	.type {
		padding: 0 20px;
		margin-bottom: 30px;
	}
	
	.type .flex-demo {
		box-shadow: 0px 0px 8px rgba(0, 0, 0, .1);
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		border-radius: 8px;
		img {
			width: 40px;
			padding: 20px 20px 20px 0;
		}
	}
	
	.item {
		margin: 0 15px 15px;
		background: #f5f5f5;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
		img {
			width: 100%;
		}
		.t {
			padding: 10px;
			font-size: 16px;
		}
		.time {
			text-align: right;
			color: #999;
			font-size: 14px;
			float: right;
			padding-top: 3px;
		}
		.tag {
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, .5);
			color: #fff;
			padding: 2px 10px;
			font-size: 13px;
		}
	}
</style>